<template>
  <div class="park_type">
    <div class="top">
      停车类型占比：
      <div id="main"></div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'

  export default {
    data() {
      return {
        roseOption: {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
              left: 'right',
              top: 'center',
              orient: 'vertical',
              data: ['商业', '写字楼', '政府', '医院'],
              textStyle: {
                color: '#fff'
              }
          },
          series: [
              {
                  name: '',
                  type: 'pie',
                  radius: [30, 50],
                  center: ['40%', '60%'],
                  color: ['#00B3F8','#00ED94','#FFD700','#FF0000'],
                  roseType: 'area',
                  data: [
                      {value: 10, name: '商业'},
                      {value: 5, name: '写字楼'},
                      {value: 15, name: '政府'},
                      {value: 25, name: '医院'},
                  ]
              }
          ]
        },
      }
    },

    mounted() {
      let myChartLine = this.$echarts.init(document.getElementById('main'));
      myChartLine.setOption(this.roseOption);
      window.addEventListener("resize",function(){
          myChartLine.resize();
        });
    },

    methods: {

    }
  }
</script>

<style scoped>

  .top {
    height: 3.6rem;
    width: 100%;
    background-color: #0F439B;
    color: #02F0FD;
    font-size: 1.6rem;
    line-height: 3.6rem;
    padding-left: 1.4rem;
  }

  #main {
    height:14.3rem;
    width: 100%;
  }







</style>
